/**
 * CNE Admin Theme Configuration
 * Modern Angular Material Theming
 */

@use '@angular/material' as mat;
@use 'sass:map';
@use 'theme-overwrites' as overwrites;
@use '../scss/constants' as *;

// 自定义 Indigo 调色板
$cne-mat-indigo: (
  50: #e8eaf6,    // 与默认相同
  100: #c5cae9,   // 与默认相同
  200: #9fa8da,   // 与默认相同
  300: #7986cb,   // 与默认相同
  400: #5c6bc0,   // 与默认相同
  500: $cne-primary-color,    // 主色
  600: $cne-secondary-color,  // 次色
  700: #303f9f,   // 与默认相同
  800: #283593,   // 与默认相同
  900: #1a237e,   // 与默认相同
  A100: $cne-hue3-color,      // 强调色3
  A200: #536dfe,  // 与默认相同
  A400: #3d5afe,  // 与默认相同
  A700: #304ffe,  // 与默认相同
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: white, // rgba(black, 0.87),
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: rgba(black, 0.87),
    A200: white,
    A400: white,
    A700: white,
  )
);

// 暗色主题 Indigo 调色板
$cne-dark-mat-indigo: (
  50: #e8eaf6,    // 与亮色主题相同
  100: #c5cae9,   // 与亮色主题相同
  200: #9fa8da,   // 与亮色主题相同
  300: #7986cb,   // 与亮色主题相同
  400: #5c6bc0,   // 与亮色主题相同
  500: $cne-primary-color,    // 主色
  600: $cne-secondary-color,  // 次色
  700: #303f9f,   // 与亮色主题相同
  800: $cne-primary-color,    // 800 使用主色
  900: #1a237e,   // 与亮色主题相同
  A100: $cne-hue3-color,      // 使用 CNE 强调色3
  A200: #536dfe,  // 与亮色主题相同
  A400: #3d5afe,  // 与亮色主题相同
  A700: #304ffe,  // 与亮色主题相同
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: rgba(black, 0.87),    // 300 使用深色文字
    400: rgba(black, 0.87),    // 400 使用深色文字
    500: map.get($cne-mat-indigo, 900),  // 500 使用深色对比
    600: white,
    700: white,
    800: white,
    900: white,
    A100: rgba(black, 0.87),
    A200: rgba(black, 0.87),   // A200 使用深色文字
    A400: rgba(black, 0.87),   // A400 使用深色文字
    A700: rgba(black, 0.87),   // A700 使用深色文字
  )
);

// 定义调色板
$cne-primary: mat.m2-define-palette($cne-mat-indigo);
$cne-accent: mat.m2-define-palette(mat.$m2-orange-palette);

// CNE 默认主题（亮色）
$cne-default-theme: mat.m2-define-light-theme((
  color: (
    primary: $cne-primary,
    accent: $cne-accent,
  ),
  typography: mat.m2-define-typography-config(
    $button: mat.m2-define-typography-level(14px, 36px, 500, $letter-spacing: 0.03125em)
  ),
  density: 0,
));

// CNE 暗色主题
$cne-dark-primary: mat.m2-define-palette($cne-dark-mat-indigo);
$cne-dark-theme: mat.m2-define-dark-theme((
  color: (
    primary: $cne-dark-primary,
    accent: $cne-accent,
  ),
  typography: mat.m2-define-typography-config(),
  density: 0,
));

// CNE 自定义组件主题混入
@mixin cne-components-theme($theme) {
  $primary: map.get($theme, primary);
  $accent: map.get($theme, accent);
  $warn: map.get($theme, warn);
  $background: map.get($theme, background);
  $foreground: map.get($theme, foreground);

  // CNE 自定义滚动条样式
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(203, 203, 203, 0.8);
    
    &:hover {
      background: rgba(165, 165, 165, 0.65);
    }
  }
}

// 默认主题
.cne-default {
  @include mat.all-component-themes($cne-default-theme);
  @include cne-components-theme($cne-default-theme);
  @include overwrites.theme-overwrites($cne-primary, $cne-default-theme);
  @include mat.typography-hierarchy($cne-default-theme);
}

// 暗色主题
.cne-dark {
  @include mat.all-component-colors($cne-dark-theme);
  @include cne-components-theme($cne-dark-theme);
}